import { Card } from "antd";
import { Handle, Position } from "reactflow";

//label:string, id:string
function InputHandle({ label, id, pos = Position.Left, style = undefined }) {
  return (
    <Handle type="target" position={pos} id={id} style={style}>
      <div className="handle_input">{label}</div>
    </Handle>
  );
}

function OutputHandle({ label, id, pos = Position.Right, style = undefined }) {
  return (
    <Handle type="source" position={pos} id={id} style={style}>
      <div className="handle_output">{label}</div>
    </Handle>
  );
}

function NodeContainer({ children, title, description }) {
  if (children) {
    return (
      <div className="node_content_container">
        <Card hoverable={true} size="small" title={title}>
          {children}
        </Card>
      </div>
    );
  } else {
    return (
      <div className="node_content_container">
        <Card hoverable={true} size="small">
          <Card.Meta title={title} description={description}></Card.Meta>
        </Card>
      </div>
    );
  }
}

export { InputHandle, OutputHandle, NodeContainer };
